<template>
  <div>
    <!-- 没有图片 -->
    <van-cell v-if="type === 0" :title="articleInfo.title" :label="label" />

    <!-- 一张图片 -->
    <van-cell v-else-if="type === 1" :title="articleInfo.title" :label="label">
      <van-image width="100" height="100" :src="articleInfo.cover?.images[0]" />
    </van-cell>

    <!-- 三张图片 -->
    <van-cell v-else :title="articleInfo.title">
      <template #label>
        <van-image
          width="100"
          height="100"
          v-for="(item, index) in articleInfo.cover?.images"
          :key="index"
          :src="item"
        />
      </template>
    </van-cell>
  </div>
</template>

<script>
import dayjs from "@/utils/dayjs";
export default {
  name: "ArticleItem",
  //   default 如果是简单数据类型就直接给，如果是复杂数据类型就以函数的返回值形式表达
  props: {
    articleInfo: {
      type: Object,
      default: () => ({})
    }
  },

  computed: {
    // 图片的数量`
    type() {
      return this.articleInfo.cover?.type;
    },
    label() {
      const { aut_name, comm_count, pubdate } = this.articleInfo;
      return `${aut_name} ${comm_count}评论 ${dayjs(pubdate).fromNow()}`;
    }
  }
};
</script>

<style></style>
